<!doctype html>
<!--[if lt IE 9]> <html class="ie"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <title>Browserhacks</title>

    <meta charset="utf-8">
    <meta name="author" content="Hugo Giraudel, Tim Pietrusky, Fabrice Weinberg">
    <meta name="robots" content="index,follow">
    <meta name="revisit-after" content="1 days">
    <meta name="description" content="An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.">

    <meta property="og:title" content="Browserhacks">
    <meta property="og:description" content="An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.">
    <meta property="og:url" content="http://browserhacks.com">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/browserhacks.css">
    <link rel="shortcut icon" href="img/browserhacks.ico" type="image/x-icon">

    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if IE 7]>
       <script src="js/browserhacks-icons-IE7.js"></script>
    <![endif]-->
</head>

<body id="browserhacks">

    <!-- Header -->
    <article class="header  centered  btn-group">
        <section class="header__logo">
            <h1>
                <a href="http://browserhacks.com" class="header__link">
                    Browser<span>hacks</span>
                </a>
            </h1>
        </section>
        <section class="header__links">
            <a href="https://github.com/4ae9b8/browserhacks" target="_blank"><span class="browserhacks-github"></span>Contribute on GitHub</a>
            <a href="http://twitter.com/Browserhacks" target="_blank"><span class="browserhacks-twitter"></span>@browserhacks</a>
        </section>
    </article>

    <!-- Description -->
    <article data-type="description" class="description  centered  grid">
        <section class="grid__col--25">
            <h2 data-type="1">What's this?</h2>
            <p>Browserhacks is an extensive list of <strong>browser specific CSS and JavaScript hacks</strong> from all over the interwebs.
            <!-- Special thanks to <a href="http://paulirish.com/2009/browser-specific-css-hacks/">Paul Irish' comprehensive post</a> and <a href="https://gist.github.com/983116">Nicolas Gallagher's additions</a>.-->
            <span class="desktop-only">Press the first letter of a browser to jump to the according section, like <span class="shortcut">F</span> for Firefox.</span></p>
        </section><!--
     --><section class="grid__col--25">
            <h2 data-type="2">How to?</h2>
            <ol>
                <li>Pick the hack you want</li>
                <li>Copy it into your stylesheet</li>
                <li>Add the style you want between the braces</li>
                <li>Enjoy the new styles for the browser you targeted!</li>
            </ol>
        </section><!--
     --><section class="grid__col--25">
            <h2 data-type="3">Reminder!</h2>
            <p>Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS or use <a href="http://modernizr.com">feature detection</a>.</p>
        </section><!--
     --><section class="grid__col--25">
            <article class="ad">
                <h2>Powered by:</h2>
                <div>
                    <div id="carbonads-container">
                        <div class="carbonad">
                            <div id="azcarbon"></div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="browserstack-ad">
                        <a href="http://browserstack.com" target="_blank">
                            <p>Tests powered by</p>
                            <img src="img/browserstack.png" alt="BrowserStack" />
                        </a>
                    </div>
                </div>
            </article>
        </section>
    </article>

    <!-- Search -->
    <article class="search  centered  grid">
        <section class="options grid__col--50">
            <input type="checkbox" name="show-legacy" id="show-legacy" title="Show / hide hacks for old browser">
            <label for="show-legacy" title="Show / hide hacks for old browser">Show legacy hacks</label>
            <input type="checkbox" name="show-test" id="show-test" title="Show / hide tests for your browser">
            <label for="show-test" title="Show / hide tests for your browser">Enable tests</label>
        </section><!--
     --><section class="grid__col--50" data-type="search">
            <label for="search" class='visually-hidden'>Find a hack</label>
            <input class="search__input" type="text" name="search" id="search" placeholder="Browser search (e.g. IE 6)" spellcheck="false">
        </section>
    </article>

    <!-- Content -->
    <div id="content">
        {{> body }}
    </div>

    <!-- Additional information -->
    <article class="additional-info  centered  grid">
        <section class="grid__col--50">
            <h2>Additional information</h2>
            <p>Browserhacks is mostly based on the <a href="http://www.paulirish.com/2009/browser-specific-css-hacks/">big list of CSS browser hacks</a> by Paul Irish. Other posts like <a href="http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/">Moving IE specific CSS to media blocks</a> by Keith Clark, <a href="http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/">Detecting browsers with JS hacks</a> by Gareth Eyes and <a href="https://gist.github.com/necolas/983116">IE CSS hacks</a> by Nicolas Gallagher greatly helped.</p>
            <p>Many thanks to <a href="https://github.com/jeffclayton">Jeff Clayton</a> for his help with the tests and the creation of new hacks. If you'd like to contribute too, please hit us on <a href="https://github.com/4ae9b8/browserhacks">GitHub</a>.</p>
        </section><!--
     --><section class="grid__col--50">
            <h2>Further reading</h2>
            <p>You may also want to have a look at these related resources:</p>
            <ul>
                <li><a href="http://csswizardry.com/2013/04/shame-css/">shame.css concept</a> by Harry Roberts</li>
                <li><a href="http://webaim.org/blog/user-agent-string-history/">history behind user-agent strings</a> by Aaron Andersen</li>
                <li><a href="http://mathiasbynens.be/demo/css-hacks">hunting a CSS hack for IE 8 only</a> by Mathias Bynens</li>
            </ul>
        </section>
    </article>

    <!-- Quotes -->
    <article id="quotes">
      <section class="quotes">
        <div>
          <blockquote class="quote"></blockquote>
          <ul class="quote-authors">
          </ul>
        </div>
      </section>
    </article>

    <!-- Template: Quote -->
    <script id="template_quote" type="text/template">
       <p class="quote-content"><%= quote %></p>
       &mdash; <a href="<%= from %>" class="quote-author" target="_blank"><%= author %></a>
    </script>

    <!-- Template: Author -->
    <script id="template_author" type="text/template">
        <div class="quote-authors__avatar">
          <div class="avatar-<%= twitter %>"></div>
        </div>

        <a href="<%= from %>" class="quote-authors__name" target="_blank"><%= author %></a>
    </script>

    <!-- Footer -->
    <footer class="footer">
        <div class="centered">
            <section class="copyright">
                <a href="#browserhacks" title="top" class="btn-top"><span class="browserhacks-arrow-up"></span></a>
                <p>Made by <a href="https://twitter.com/HugoGiraudel" target="_blank"> Hugo Giraudel</a>, <a href="https://twitter.com/TimPietrusky" target="_blank">Tim Pietrusky</a> and <a href="http://twitter.com/fweinb" target="_blank">Fabrice Weinberg</a>. <br>Design by <a href="https://twitter.com/_joshnh">Joshua Hibbert</a>. Tests by <a href="https://github.com/jeffclayton">Jeff Clayton</a>.</p>
                </p>
            </section>
            <section class="footer__links">
                <a href="https://github.com/4ae9b8/browserhacks" target="_blank"><span class="browserhacks-github"></span> Add hacks / report bugs</a>
                <a href="http://twitter.com/share?text=An+extensive+list+of+CSS/JS+@Browserhacks+from+all+over+the+interwebs+curated+by+@HugoGiraudel+and+@TimPietrusky&url=http://browserhacks.com" target="_blank"><span class="browserhacks-twitter"></span> Spread the word</a>
            </section>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="js/main.min.js" data-manual="true"></script>
    <script>testWidget.init();</script>
    <script type="text/javascript">
        var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-38522111-1']);_gaq.push(['_setDomainName', 'browserhacks.com']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
    </script>
    </body>
</html>
